<template>
  <div>
    选择文件：<input id="uploadBtn" type="file" @change="loadExcel" />
    <el-button @click="exporttest">导出</el-button>
    <div id="luckysheet" class="luckysheet-wrap"></div>
  </div>
</template>

<script setup>
import { exportExcel } from "../utils/export";
import LuckyExcel from "luckyexcel";
import { ref, onMounted } from "vue";
onMounted(() => {
  luckysheet.create({
    container: "luckysheet",
    lang: "zh",

  });
});
const exporttest = async () => {
  let file = await exportExcel(luckysheet.getAllSheets(), '导出的文件名字', 'download');
  let form = new FormData();
  form.append("file", file);
  form.append("name", "导出的文件名字");

};
const loadExcel = (evt) => {
  const files = evt.target.files;
  if (files == null || files.length == 0) {
    alert("请上传文件");
    return;
  }

  let name = files[0].name;
  let suffixArr = name.split("."),
    suffix = suffixArr[suffixArr.length - 1];
  if (suffix != "xlsx") {
    alert("只能导入xlsx文件格式的Excel");
    return;
  }
  LuckyExcel.transformExcelToLucky(
    files[0],
    function (exportJson, luckysheetfile) {
      if (exportJson.sheets == null || exportJson.sheets.length == 0) {
        alert("导入失败!");
        return;
      }
      luckysheet.destroy();
      luckysheet.create({
        container: "luckysheet", //容器的Id
        showinfobar: false,
        data: exportJson.sheets,
        title: exportJson.info.name,
        userInfo: exportJson.info.name.creator,
      });
    }
  );
};
//对表格数据进行渲染
</script>

<style scoped>
.luckysheet-wrap {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  height: 90%;
  left: 0px;
  top: 100px;
}
</style>
